<template>
  <div class="index-categories-list md:flex items-center gap-3">
    <div class="categories-list inline-flex flex-wrap items-center gap-3">
      <template v-for="(item, key) in categories">
        <common-link :path='`/category?group=${item.handle}`'
          :params='{handle:item.handle }'
          :key="key"
          class="border border-gray-1600 hover:border-purple-1300 py-2 px-2 flex items-center group rounded-md">
          <span class="text-sm text-gray-1000 group-hover:text-purple-1300">
            {{item.name}}
          </span>
        </common-link>
      </template>
    </div>
    <common-link path="/category"
      class="mt-3 md:mt-0 border border-gray-1600 hover:border-purple-1300 py-2 px-2 inline-flex items-center group rounded-md whitespace-nowrap">
      <span class="text-sm text-gray-1000 group-hover:text-purple-1300">{{$t('index_more')}}</span>
      <span class="block w-12px h-12px ml-1.5">
        <svg-icon className="text-xs flex-shrink-0"
          iconName='More'></svg-icon>
      </span>
    </common-link>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'IndexCategoriesList',
  props: {
    categories: {
      type: Array,
      default: () => [],
    },
  },
  computed: {
    ...mapState({
      locale: (state) => state.locale,
    }),
  },
  methods: {
    getLocaleText(val, val_locales) {
      if (
        Object.prototype.toString.call(val_locales) === '[object Object]' &&
        typeof val_locales[this.locale] != 'undefined' &&
        val_locales[this.locale] !== null &&
        val_locales[this.locale] !== ''
      ) {
        return val_locales[this.locale]
      } else {
        return val
      }
    },
  },
}
</script>
<style lang='scss' scoped>
.index-categories-list {
  .categories-list {
    height: 42px;
    overflow: hidden;
  }
  a {
    svg {
      fill: #2d2d2d;
    }
    &:hover {
      svg {
        fill: #7150e6;
      }
    }
  }
  .w-12px {
    width: 12px;
  }
  .h-12px {
    height: 12px;
  }
  .-mt-1px {
    margin-top: -1px;
  }
}
@media (max-width: 767px) {
  .index-categories-list {
    .categories-list {
      height: 150px;
    }
  }
}
</style>